<template>
  <div class="error-card-notfound">
    <div class="not-found">
      <div class="box-404">
        <img src="../../assets/svg/404.png" alt="">
      </div>

      <p class="not-found-content">加载失败，请重新尝试</p>
      <button class="reload" @click="reload">返回首页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "errorCard",
  methods:{
    reload(){
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.error-card-notfound{
  height: 100%;
  width: 100%;
  background-image: $bgImage;
  margin: 0 auto;
  @extend %flex-row-center;
  .not-found{
    text-align: center;
    .box-404{
      width:442*$length;
      height:200*$length;
      margin:0 auto;
      @extend %flex-row-center;

      img{
        width:442*$length;
        height:auto;
      }
    }

    .rotating{
      transform: rotate(25deg);
      margin-top: 25*$length;
    }
    .not-found-content{
      padding-top: 20*$length;
      padding-bottom: 47*$length;
      @include fontStyle(16,22,500,#666,center);
    }
    .reload{
      display: block;
      margin: 0 auto;
      width: 148*$length;
      height: 48*$length;
      line-height: 48*$length;
      font-size: 14*$length;
      color: #fff;
      background-color: #75D098;
      @include border-radius(4*$length);
      cursor: pointer;
      border: none;
      @extend %animate-transition;
      &:hover{
        background-color: #7f828b;
      }
    }
  }
}
</style>
